<template>
  <div>
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>

    <div class="top_b">
			<el-form ref="sform" :inline="true" :model="searchForm" label-width="80px">
        <el-form-item label="体检编号">
          <el-input
              class="input_c"
              v-model="searchForm.orderNo"
              placeholder="请扫描条码"
              style="width: 300px;"
              @keyup.enter.native="enterFun"
              clearable
          ></el-input>
			  </el-form-item>
			  <el-form-item label="姓名">
			    <el-input v-model="searchForm.customerName" clearable></el-input>
			  </el-form-item>
			  <el-form-item label="单位名称">
			    <el-input v-model="searchForm.enterpriseName" clearable></el-input>
			  </el-form-item>
			  <el-form-item label="合同名称">
			    <el-input v-model="searchForm.contractName" clearable></el-input>
			  </el-form-item>
			  <!-- <el-form-item label="分组">
			    <el-input v-model="searchForm.groupName"></el-input>
			  </el-form-item> -->
			  <!-- <el-form-item label="体检套餐">
			    <el-input v-model="searchForm.packageCustomname"></el-input>
			  </el-form-item> -->
        <el-form-item label="检查状态">
			    <el-select v-model="searchForm.noReplenishCheck" clearable style="width: 200px;">
			      <el-option label="全部" value=""></el-option>
			      <el-option label="未检" value="0"></el-option>
			      <el-option label="已检" value="1"></el-option>
			    </el-select>
			  </el-form-item>

			  <el-form-item label="体检日期">
					<el-date-picker
						v-model="startSignDatetime"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            clearable
            >
					</el-date-picker>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="getList()" class="chaxun">查询</el-button>
			  </el-form-item>
			</el-form>
    </div>

    <!-- 列表 -->
    <div>
      <!-- <el-table
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%;margin-top:5px"
          @selection-change="handleSelectionChange"> -->
          <el-table
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%;margin-top:5px"
          border
          >
        <!-- <el-table-column type="selection" width="55">
        </el-table-column> -->
        <el-table-column align="center" prop="orderNo" label="体检单号"  width="150">
        </el-table-column>
        <!-- <el-table-column align="center" label="体检编号" prop="orderNo" type="index" width="120">
        </el-table-column> -->
        <el-table-column align="center" prop="customerName" label="姓名">
        </el-table-column>
        <el-table-column align="center" prop="sex" label="性别">
          <template slot-scope="scope">
            <span>{{scope.row.sex==1?"男":"女"}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="age" label="年龄" >
        </el-table-column>
        <el-table-column align="center" prop="telephone" label="联系方式">
        </el-table-column>
        <el-table-column align="center" prop="enterpriseName" label="单位名称" >
        </el-table-column>
        <el-table-column align="center" prop="contractName" label="合同名称" >
        </el-table-column>
        <el-table-column align="center" prop="groupName" label="分组" >
        </el-table-column>
        <el-table-column align="center" prop="signDatetime" label="体检时间" >
          <template slot-scope="scope">
            <span>{{scope.row.signDatetime|formatDate}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"  prop="address" label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status >=10" disabled type="info" size="small" class="chaxun">已录
            </el-button>

            <el-button v-else @click="toEditPage(scope.row)" type="primary" size="small" class="chaxun">补录
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.pageSize"
          :page-sizes="[10, 20, 30, 40]" :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import crumbs from "../../views/Crumbs.vue";
import { formatTimeToStr } from "../../common/utils/date.js";
export default {
  components: {
    crumbs,
  },
  data() {
    return {
			orderNo:"",
			countData:{
				// finishReviewCount: 0
				// myFinishReviewCount: 0
				// noReviewCount: 0
				// waitReviewCount: 0
			},
      formLabelWidth: '80px',
      searchForm: {},
      startSignDatetime:[],
      pageSize: 10,
      pageNo: 1,
      rules: {
        roleName: [{
          required: true,
          message: '请输入角色名称',
          trigger: 'blur'
        }],
        remarks: [{
          required: true,
          message: '请输入备注',
          trigger: 'blur'
        }],
        // menu: [
        //   { type: 'array', required: true, message: '请至少选择一个权限', trigger: 'change' }
        // ],
        // role: [
        //   { type: 'array', required: true, message: '请至少选择一个权限', trigger: 'change' }
        // ],
      },

      dialogFormVisible: false,
      BreadCrumb: [
        {
          path: "",
          name: "检后管理"
        },
        {
          path: "",
          name: "结果补录"
        },
      ],
      list: [],
      id: null,
			total: 0,
    }
  },
  filters: {
    formatDate: function (time) {
      if (time != null && time !== "") {
        var date = new Date(time);
        return formatTimeToStr(date, "yyyy-MM-dd hh:mm");
      } else {
        return "";
      }
    },
  },
  created() {
    this.startSignDatetime=[
      // formatTimeToStr(new Date(new Date().setFullYear(new Date().getFullYear() - 1)), "yyyy-MM-dd"),
      formatTimeToStr(new Date(new Date().setMonth(new Date().getMonth() - 1)), "yyyy-MM-dd"),
      formatTimeToStr(new Date(), "yyyy-MM-dd")
    ]
    this.getList()
		// this.getCount()
  },
  methods: {
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
    toEditPage(row) {
      this.$router.push({name: "personnelauditSave", query: {ordersId: row.orderNo}});
    },
    enterFun() {
      this.$router.push({name: "personnelauditSave", query: {ordersId:this.searchForm.orderNo}});
    },
    getList() {
      // 开始时间回到结束时间
      if(this.startSignDatetime instanceof Array){
        this.searchForm.endSignDatetime = this.startSignDatetime[1]
        this.searchForm.startSignDatetime = this.startSignDatetime[0]
      }else {
        delete this.searchForm.endSignDatetime
        delete this.searchForm.startSignDatetime
      }
			// console.log(this.searchForm)
      this.$axios.getPeOrdersMainList({
				...this.searchForm,
        pageSize:this.pageSize,
        pageNo:this.pageNo
			}).then(res => {
        if (res.code === "00000") {
          this.list = res.data.records
          this.total = res.data.total
        }
      })
    },
		getCount(){
		  this.$axios.getReviewPeOrdersMainCount({
				...this.searchForm
			}).then(res => {
		    if (res.code === "00000") {
		      this.countData=res.data
		    }
				// console.log(res)
		  })
		},

    // 每页几条
    handleSizeChange(val) {
      this.pageSize = val
      // this.doGetList({pageSize:this.pageSize,pageNo:this.pageNo})
      this.getList()
    },
    // 第几页
    handleCurrentChange(val) {
      this.pageNo = val
      this.getList()
      // this.doGetList({pageSize:this.pageSize,pageNo:this.pageNo})
    }
  }
}
</script>

<style scoped>
.top_but {
  margin-left: 20px;
}

.top_buts {
  margin-top: 10px;
  margin-bottom: 10px;
}

.pagination {
  text-align: center;
}

.top_b {
  display: flex;
}

.top_inp {
  /* width: 300px; */
  display: flex;
}

.dialog {
  width: 500px;
  margin: 0px auto;
}

/*  */

.el-select {
  width: 300px;
}

.el-select /deep/ .el-input__inner {
  width: 100%;
}

::v-deep .input_c .el-input__inner {
  width: 100%;
}

::v-deep .el-dialog__body {
  border-bottom: 1px solid #cccccc;
  margin: 0 20px;
  padding: 20px 20px 0px;
  /* padding: 20px; */
}

.date {
  text-align: right;
  color: #7F7F7F;
  font-weight: bold;
  display: flex;
}

.info_l {
  /* width: 80%; */
  margin: 0px auto;
}

.info_l_input {
  width: 82%;
}

.info_l_button {
  margin-left: 10px;
  white-space: nowrap;
}

.info_sel_r_groupn {
  margin-left: 40px;
}

.info_sel_r_group {
  margin-left: 10px;
}

.info_sel {
  display: flex;
}

.info_sel_l {
  width: 50%;
}

.info_sel_r {
  width: 50%;
  margin-left: 50px;
}

.numb_er {
	margin-bottom: 20px;
  font-weight: bold;
	width: 100%;
}
.numb_er span {
	margin: 0 10px;
}
.info_sel_r_img {
  width: 180px;
  height: 220px;
  margin: 0px auto;
}

.avatar-uploader {
  margin: 0px auto;
  text-align: center;
}

.info_l /deep/ .el-select {
  width: 100%;
}

/* .info_l_head {
} */

.el-table th > .cell {
  white-space: nowrap;
}

.add_info {
  display: flex;
}

.message {
  line-height: 50px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 10px;
}

.subtion {
  display: flex;
  justify-content: space-between;
}

.info_r {
  margin-left: 20px;
}

.tab_b {
  display: flex;
  justify-content: space-between;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}

.tab_c {
  display: flex;
}

.radios {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #cccccc;
}

.radios_c {
  width: 45%;
  display: flex;
  justify-content: space-between;
}

.date > span {
  margin-top: 30px;
}
.chaxun{
  padding-left: 50px;
  padding-right: 50px;
  margin-left: 30px;
}
</style>
